<template>
	<view class="class">
		<view class="deatil">
			<view class="header">
				<image :src="query.image" mode="aspectFill" class="left_img"></image>
				<view class="right_comlumn">
					<view class="title">
						{{query.title}}
					</view>
					<view class="center">
						<view class="row-box">
							<view v-for="(item,index) in query.label_list" :key="index" class="Oitem">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="price">
						<text class="size1 color1 fw1">￥</text>
						<text class="size2 color1 fw1">{{query.pay_cost}}</text>
						<text class="size3 color1 fw2">/{{query.unit}}</text>
						<text class="size3 color2 fw3 lh">￥{{query.price}}/{{query.unit}}</text>
					</view>
				</view>
			</view>
			<view class="bottom bb">
				<view class="row2 mb">
					<view class="left_title">
						上课场地
					</view>
					<view class="right-box">
						<text class="size" style="color: #000000;">{{query.shop_info.name}}</text>
					</view>
				</view>
			
				<view class="row2">
					<view class="left_title">
						上课教练
					</view>
					<view class="right-box">
						<image :src="query.coach_info.avatar" mode="aspectFill" class="avater"></image>
						<text class="size" style="color: #000000;">{{query.coach_info.nickname}}</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="row2">
					<view class="left_title">
						课次
					</view>
					<view class="right-box">
						<text class="size" style="color: #000000;">{{query.amount}}节</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			query: {
				type: null,
				default: null,
				required: true
			}
		},
		data(){
			return{
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.class{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 24rpx;
		.deatil{
			width: 702rpx;
			height: 504rpx;
			background: #f6f6f6;
			border-radius: 16rpx;
			padding: 22rpx 24rpx 34rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 32rpx;
			.header {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #e9e9e9;
			
				.left_img {
					width: 230rpx;
					height: 170rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 16rpx;
					margin-right: 20rpx;
				}
			
				.right_comlumn {
					flex: 1;
					display: flex;
					flex-direction: column;
			
					.title {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #333333;
						margin-bottom: 12rpx;
					}
			
					.center {
						flex: 1;
					}
			
					.row-box {
						display: flex;
						flex-direction: row;
						align-items: center;
			
						.Oitem {
							padding: 0 6rpx;
							background: #f6f6f6;
							border-radius: 4rpx;
							font-size: 20rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
							margin-right: 6rpx;
						}
					}
			
					.price {
						display: flex;
						flex-direction: row;
						align-items: baseline;
			
						.size1 {
							font-size: 24rpx;
						}
			
						.size2 {
							font-size: 32rpx;
			
						}
						.lh{
							text-decoration:  line-through;
						}
						.size3 {
							font-size: 20rpx;
							
						}
			
						.color1 {
							color: #F37364;
						}
			
						.color2 {
							margin-left: 6rpx;
							color: #999999;
						}
			
						.fw1 {
							font-weight: 700;
						}
			
						.fw2 {
							font-weight: 500;
						}
			
						.fw3 {
							font-weight: 400;
						}
					}
				}
			}
			.bb{
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #e9e9e9;
			}
			.bottom {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-top: 34rpx;
			
				.mb {
					margin-bottom: 32rpx;
				}
			
				.row2 {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
			
					.left_title {
						flex: 1;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
						letter-spacing: 0.62rpx;
					}
			
					.right-box {
						display: flex;
						flex-direction: row;
						align-items: center;
			
						.size {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: right;
							margin: 0 8rpx;
						}
			
						.img {
							width: 10rpx;
							height: 16rpx;
						}
			
						.avater {
							width: 40rpx;
							height: 40rpx;
							background: rgba(0, 0, 0, 0.00);
							border-radius: 50%;
						}
					}
				}
			}
		}
		
		.btn1 {
			width: 702rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.btn2 {
			width: 702rpx;
			height: 88rpx;
			border: 1rpx solid #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #73F0EA;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>